<!DOCTYPE html>
<#assign f = JspTaglibs["http://www.casic304.cn/f"] />
<html>
<head>
  <meta charset="utf-8">
  <title>化学压力电源信息列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
  <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
  <script type="text/javascript">
    var __ctx = "${ctx}";
  </script>
  <style>
    .qbdms-echarsDiv{
      position: absolute;top: 130px;left: 16px;right: 16px; bottom: 6px;overflow: auto;
      padding-top: 16px;
    }
    @media screen and (min-width: 1380px){
      .chartDiv{
        width: 46%;
        float: left;
      }
    }
    @media screen and (min-width: 804px) and (max-width:1380px){
      .chartDiv {
        width: 96%;
        float: left;
      }
    }
    .selch .layui-icon-date {
      top: 6px !important;
    }
  </style>
</head>
<body class="listBody">
<div class="qbdms-list">
  <div class="layui-table-view-body" style="padding: 14px;height: 100%;position: relative">
    <div class="ccpui-enterSel">
      <form class="layui-form" action="" lay-filter="wQbdChemicalPhysicsInfoQueryForm">
        <div class="layui-form-body selch" style="margin-top: 0">
          <div class="table-top-filter layui-row">
            <div class="qbdms-listForm">
              <label class="layui-form-label">查询规则</label>
              <div class="layui-input-block">
                <select name="tjgz" autocomplete="off" class="layui-input" fieldname="v" lay-filter="tjgz" id="tjgz" lay-verify="required">
                </select>
              </div>
            </div>
            <div class="qbdms-listForm" id="startTimeHide1" style="display: none">
              <label class="layui-form-label">年度开始时间</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input dateTimeFiled filter-value start_time1" placeholder="请输入" id="beginTime"/>
              </div>
            </div>
            <div class="qbdms-listForm" id="endTimeHide1" style="display: none">
              <label class="layui-form-label">年度结束时间</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input dateTimeFiled filter-value end_time1" placeholder="请输入" id="endTime"/>
              </div>
            </div>
            <div class="qbdms-listForm" id="startTimeHide2">
              <label class="layui-form-label">月度开始时间</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input dateTimeFiled filter-value start_time2" lay-verify="required" placeholder="请输入" id="beginTime2" lay-verify="required" value="${beginTime}"/>
              </div>
            </div>
            <div class="qbdms-listForm" id="endTimeHide2">
              <label class="layui-form-label">月度结束时间</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input dateTimeFiled filter-value end_time2"
                       placeholder="请输入" id="endTime2" lay-verify="required" value="${endTime}"/>
              </div>
            </div>
            <div class="qbdms-listForm">
              <label class="layui-form-label">导出图片格式</label>
              <div class="layui-input-block">
                <select name="imageFormat" autocomplete="off"
                        class="layui-input" fieldname="imageFormat"
                        lay-filter="imageFormat" id="imageFormat" lay-verify="required">
                  <option value="JPEG">JPEG</option>
                  <option value="PNG">PNG</option>
                </select>
              </div>
            </div>
          </div>
          <div class="selchBtn">
            <a class="layui-btn layui-btn-sm fillBtn" lay-event="query" lay-submit lay-filter="query" id="query">
              <span>查询</span>
            </a>
<!--            <div class="layui-btn-group">-->
<!--              <button type="button" class="layui-btn layui-btn-sm" lay-event="clears" qbdms-event="clears" style="width: 28px;font-size: 12px;padding: 0">-->
<!--                <i class="iconfont data-iconcommon_refresh"></i>-->
<!--              </button>-->
<!--            </div>-->
          </div>
        </div>
      </form>
    </div>
    <div class="qbdms-echarsDiv">
      <div id="chart2Bar" class="chartDiv" style="height:600px;margin-right:24px"></div>
      <!-- 研制型号原因 饼图-->
      <div id="chart2Pie" class="chartDiv" style="height:600px;"></div>
    </div>
  </div>
</div>
<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/qbdmsStatic/public/echarts.min.js"></script>
<script>
  //一般直接写在一个js文件中
  layui.config({
    base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
  }).extend({
    index: 'lib/index'
  }).use(['index', 'form', 'jquery', 'layer', 'laydate', 'common','publicMethods','propsHandle'],
      function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var common = layui.common;
        var publicMethods=layui.publicMethods;
        var form = layui.form;
        var imageFormat = "JPEG";
        var data2 = "";
        var data3 = "";
        var tjgz = "aydtj";
        var beginTime = "${beginTime}";
        var endTime = "${endTime}";

        var propsHandle = layui.propsHandle;
        var defProps = {
                  //viewMould: 'form/formDef/view/formDesign/moulds/', // 组件模块 存放文件 *****
                  viewMould: 'moulds/', // 组件模块 存放文件 *****
                  selectorBtn: '.selectorBtn'
                },
                temQuery = new propsHandle();  // 实例化模板功能部分
        temQuery.initTem({
          selectorBtn: defProps.selectorBtn,
          selectorTemPath: setter.views + defProps.viewMould
        });

        form.on('select(tjgz)', function (data) {
          tjgz = data.value;
          if (data.value == "andtj") {
            $("#startTimeHide1").show();
            $("#endTimeHide1").show();
            $("#startTimeHide2").hide();
            $("#endTimeHide2").hide();
            $("#beginTime").attr("lay-verify", "required");
            $("#endTime").attr("lay-verify", "required");
            $('#beginTime2').removeAttr("lay-verify");
            $('#endTime2').removeAttr("lay-verify");

          } else {
            $('#beginTime').removeAttr("lay-verify");
            $('#endTime').removeAttr("lay-verify");
            $("#beginTime2").attr("lay-verify", "required");
            $("#endTime2").attr("lay-verify", "required");
            $("#startTimeHide1").hide();
            $("#endTimeHide1").hide();
            $("#startTimeHide2").show();
            $("#endTimeHide2").show();
          }
          beginTime = "";
          endTime = "";
          $("#beginTime2").val("");
          $("#endTime2").val("");
          $('#beginTime').val("");
          $('#endTime').val("");
        });
        form.on('select(imageFormat)', function (data) {
          imageFormat = data.value;
          if (data2 != "") {
            echartBar(data2);
          }
          if (data3 != "") {
            echartPie(data3);
          }
        });

        form.on('submit(query)', function (data) {
          if (tjgz == "andtj") {
            beginTime = $("#beginTime").val();
            endTime = $("#endTime").val();
          } else {
            beginTime = $("#beginTime2").val();
            endTime = $("#endTime2").val();
          }
          getChartData()
          return false;
        })

        function dateReflash() {
          //年范围
          dateHanlder({startName: '.start_time1', endName: '.end_time1'}, "year");
          dateHanlder({startName: '.start_time2', endName: '.end_time2'}, "month");
          var tjgz = eval('${tjgz}');
          common.initDicData("tjgz", tjgz);
          form.val("wQbdChemicalPhysicsInfoQueryForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "tjgz": "aydtj" // "name": "value"
          });
          getChartData();
        }

        function dateHanlder(props, type) {
          if (props.startName && props.endName) {
            var nowTime = new Date().valueOf();
            var start = laydate.render({
              elem: props.startName,
              trigger: 'click',
              type: type,
              max: nowTime,
              done: function (value, date, endDate) {
                endMax = end.config.max;
                end.config.min = date; //最大时间为结束时间的开始值  
                end.config.min.month = date.month - 1;
                $(props.startName).val(value);
              }
            });
            var end = laydate.render({
              elem: props.endName,
              trigger: 'click',
              type: type,
              max: 4073558400000,
              format: 'yyyy-MM-dd',
              done: function (value, date) {
                if ($.trim(value) == '') {
                  var curDate = new Date();
                  date = {
                    'date': curDate.getDate(),
                    'month': curDate.getMonth() + 1,
                    'year': curDate.getFullYear()
                  };
                }
                start.config.max = date; //最小时间为开始时间的最大值  
                start.config.max.month = date.month - 1;
                $(props.endName).val(value);
              }
            });
          }
        }

        function getChartData() {
          $.ajax({
            url:  '${ctx}/qbdms/militaryTradeQuality/getChartData',
            data: {
              "beginTime": beginTime,
              "endTime": endTime,
              "statisticalMethods": tjgz
            },
            type: 'post',
            dataType: 'json',
            async: false,
            success: function (res) {
              if (res.data.length == 0) {
                layer.msg("暂无统计图数据！",{title: false,skin: 'confirm-class'}, {icon: 5});
              }
              data2 = "";
              data3 = "";
              data2 = res.data[0];
              data3 = res.data[1];
              echartBar(data2);
              echartPie(data3);
            }
          })

        }

        var chart2Bar = echarts.init(document.getElementById("chart2Bar"));
        var chart2Pie = echarts.init(document.getElementById("chart2Pie"));
        chart2Bar.on('click', function (params) {
          var title;
          var isOther = 0;
          if (params.name.length > 4) {
            title = params.name + "军贸质量问题明细";
          } else {
            title = params.name + "年军贸质量问题明细";
          }
          var height=publicMethods.layHeight('.listBody');
          layer.open({
            type: 2,
            title: title,
            skin:'qbdms-layerFormBtn',
            area: ['80%',height],
            content: '${ctx}/qbdms/militaryTradeQuality/view/list?title=' + title + "&beginTime="
                + params.name + "&endTime=" + params.name + "&isOther=" + isOther + "&tjgz=" + tjgz
          });
        });
        chart2Pie.on('click', function (params) {
          getTableDetail(params);
        });

        function echartBar(data) {
          var option = {
            animation: false,
            title: {
              text: data.title,
              x: 'center',
              y: 'top'
            },
            color: ['#5B8FF9'],
            xAxis: [{
              type: 'category',
              data: data.xtitlelist,
            }],
            toolbox: {
              feature: {
                saveAsImage: {type: imageFormat}
              }
            },
            yAxis: [{
              type: 'value',
              name: '数量',
              nameLocation: 'middle',
              nameTextStyle: {
                verticalAlign: 'bottom',
                padding: [20, 20, 30, 440]
              },
              axisLine: {
                lineStyle: {
                  width: 0
                }
              }

            }],

            series: [{
              name: '直接访问',
              type: 'bar',
              data: data.datalist,
              barMaxWidth:40,
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    textStyle: { //数值样式
                      color: 'black',
                      fontSize: 16
                    }
                  }
                }
              }
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          chart2Bar.setOption(option);
        }

        function echartPie(data) {
          var optionPie = {
            animation: false,
            color:['#5B8FF9','#5AD8A6','#5D7092','#F6BD16','#E86452','#6DC8EC','#945FB9','#FF9845','#1E9493','#FF99C3'],
            title: {
              text: data.title,
              left: 'center'
            },
            legend: {
              icon: 'circle',
              orient: 'horizontal',
              left: 'center',
              bottom: '50px',
              data: data.xtitlelist
            },
            toolbox: {
              feature: {
                saveAsImage: {type: imageFormat}
              }
            },
            series: [{
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              // center: ['50%', '60%'],
              data: data.datalist,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                  label: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)'
                  },
                  labelLine: {
                    show: true
                  }
                }
              }
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          chart2Pie.setOption(optionPie);
        }

        function getTableDetail(params) {
          if (beginTime == "" || endTime == "") {
            layer.msg("起止时间不能为空！", {icon: 5});
            return;
          }
          var begin = beginTime.substring(0, 4);
          var end = endTime.substring(0, 4);
          var title;
          var isOther = 1;
          if (params.name.substring(0, 2) == "军贸") {
            isOther = 0;
          }
          if (begin == end) {
            title = beginTime + "至" + endTime + params.name + "明细";
          } else {
            title = begin + "至" + endTime + "年" + params.name + "明细";
          }
          var height=publicMethods.layHeight('.listBody');
          layer.open({
            type: 2,
            skin:'qbdms-layerFormBtn',
            title: title,
            area: ['80%', height],
            content: '${ctx}/qbdms/militaryTradeQuality/view/list?title=' + title + "&beginTime="
                + beginTime + "&endTime=" + endTime + "&isOther=" + isOther + "&tjgz=" + tjgz
          });

        }

        window.Initialization = function () {
          dateReflash();
        };
        /*刷新时间控件*/
        dateReflash();
      });
</script>
</body>
</html>